/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: "得意黑 斜体";
    font-weight: 400;
    src: url("./font/SmileySans-Oblique.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/8HxJ0mLfB1rY/icTPlrLW45xh.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/8HxJ0mLfB1rY/zojnlDMEVAoo.woff") format("woff");
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "得意黑 斜体", Arial, Helvetica, sans-serif;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    cursor: pointer;
}

span {
    position: fixed;
    pointer-events: none;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    animation: fateInOut 1s linear forwards;
    will-change: transform;
}

@keyframes fateInOut {
    0%,
    100% {
        opacity: 0;
    }
    20%,
    80% {
        opacity: 1;
    }
}

span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./heart.png") no-repeat center center/cover;
    animation: moveShape 1s linear forwards;
}

@keyframes moveShape {
    0% {
        transform: translate(0) rotate(0);
    }
    100% {
        transform: translate(150px) rotate(360deg);
    }
}

h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 20px;
    font-style: italic;
    text-align: center;

    background-clip: text;
    -webkit-text-fill-color: transparent;

    background-image: url("./heart.png");
    background-size: 50px;
    animation: bgmove 20s linear infinite forwards;
}

@keyframes bgmove {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

#svg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 描边动画的必备样式 */
#heartPath {
    /* 描边动画，以边框代替中间内容，所以不要有填充 */
    fill: none;
    /* 设置边框颜色和宽度，要不然无法看到边框 */
    stroke: #d81e06;
    /* 圆角 */
    stroke-linecap: round;
    /* 边框宽度 */
    stroke-width: 10px;
    /* 设置虚部和实部长度为边框的长度：100% */
    stroke-dasharray: 100%;
    /* 设置虚部的偏移量为 100%，即从可见变为不可见 */
    stroke-dashoffset: 100%;
    /* 别忘了 forwards ，让动画定在最后一帧，保持描边可见*/
    /* animation: line1Move 2s linear forwards; */
}

@keyframes line1Move {
    /* 百分之0 时，已经是偏移到不可见了 */
    100% {
        stroke-dashoffset: 0px; /* 不偏移了，变为可见 */
    }
}
